<template>
  <div :id="containerID" class="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { v4 } from "uuid"

export default {
  name: "map-view",
  props: {
    // 关键字查询
    autoComplete: {
      type: Function,
      default: () => { }
    },
    // 是否可以点击 点击后将打点 并且获取地点信息 @position
    isClick: {
      type: Boolean,
      default: false
    },
    // 标记
    marker: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      map: null,
      placeSearch: null,
      lnglat: [],
      markers: [],
      position: {},
      containerID: v4()
    }
  },
  mounted() {
    console.log(this.containerID)
    this.initAMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    // 地图初始化
    initAMap() {
      AMapLoader.load({
        key: "4a820f8e083bf0c24b80435a2fed86fe", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.ToolBar", "AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
      })
        .then((AMap) => {
          this.map = new AMap.Map(this.containerID, {
            // 设置地图容器id
            viewMode: "3D", //  是否为3D地图模式
            zoom: 11, // 初始化地图级别
            resizeEnable: true
          });
          var toolbar = new AMap.ToolBar({
            position: 'RT'
          });
          this.map.addControl(toolbar);
          // this.setMarker(centerLen)
          // 关键字查询
          this.autoComplete()

          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          });

          // 监听鼠标点击事件
          if (this.isClick) {
            this.map.on("click", this.clickMapHandler);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //选中查询出的记录
    selectSite(e) {
      if (e.poi.location) {
        this.lnglat = [e.poi.location.lng, e.poi.location.lat];

        // 地图位置移动
        this.placeSearch.setCity(e.poi.adcode);
        this.placeSearch.search(e.poi.name);
        // 打点
        this.setMarker(this.lnglat)
        //获取地点信息
        this.getAddress(e)
      } else {
        this.$message.error("查询地址失败，请重新输入地址");
      }
    },
    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {

      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
      // 点击地图上的位置，根据经纬度转换成详细地址
      this.getAddress(e)

    },
    getAddress(e) {
      let geocoder = new AMap.Geocoder({});
      geocoder.getAddress(this.lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          const addressComponent = result.regeocode.addressComponent
          let city = addressComponent.city

          switch (addressComponent.province) {
            case '海南省':
              city = addressComponent.district
              break;
            case '北京市':
              city = '北京城区'
              break;
            case '上海市':
              city = '上海城区'
              break;
            case '天津市':
              city = '天津城区'
              break;
            case '香港特别行政区':
              city = '香港特别行政区'
              break;
            case '澳门特别行政区':
              city = '澳门特别行政区'
              break;
          }
          const position = {
            province: addressComponent.province,//省
            city: city,
            county: addressComponent.province === '海南省' ? addressComponent.township : addressComponent.district || addressComponent.township, // 区
            addressDetail: result.regeocode.formattedAddress,//详细地址
            longitude: this.lnglat[0],//经度
            latitude: this.lnglat[1],//纬度
          }
          this.$emit('position', position)
        }
      });
    },
    //  添加标记
    setMarker(lnglat) {
      this.removeMarker();
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 删除之前后的标记点
    removeMarker() {
      if (this.markers && this.markers.length > 0) {
        this.map.remove(this.markers);
      }
    },
    // 添加多个标记
    setMarkers(data) {
      data.forEach(item => {
        let marker = new AMap.Marker({
          position: item.lnglats
        });
        marker.setMap(this.map);
        marker.setLabel({
          // offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
          content: item.addressDetail, //设置文本标注内容
          direction: 'top' //设置文本标注方位
        });
        // this.markers.push(marker);
      })
      // 自动适应标记位置
      this.map.setFitView();
    }
  },
};
</script>
<style scoped>
.container {
  width: 100%;
  flex: 1;
  height: 200px;
}
</style>
